import React, { useState } from 'react';
import Node from './Node';
import Edge from './Edge';

function App() {
  const [nodes, setNodes] = useState([
    { id: 'n1', x: 100, y: 100, text: 'Node 1' },
    { id: 'n2', x: 200, y: 200, text: 'Node 2' },
  ]);
  const [edges, setEdges] = useState([
    { id: 'e1', start: 'n1', end: 'n2' },
  ]);

  const handleNodeMove = (id, x, y) => {
    const newNodes = nodes.map(node => {
      if (node.id === id) {
        return { ...node, x, y };
      }
      return node;
    });
    setNodes(newNodes);
  };

  const handleNodeTextChange = (id, text) => {
    const newNodes = nodes.map(node => {
      if (node.id === id) {
        return { ...node, text };
      }
      return node;
    });
    setNodes(newNodes);
  };

  return (
    <div>
      {nodes.map(node => (
        <Node
          key={node.id}
          id={node.id}
          x={node.x}
          y={node.y}
          text={node.text}
          onMove={handleNodeMove}
          onTextChange={handleNodeTextChange}
        />
      ))}
      {edges.map(edge => (
        <Edge
          key={edge.id}
          start={edge.start}
          end={edge.end}
          nodes={nodes}
        />
      ))}
    </div>
  );
}

export default App;